<template>
  <div class="box">
    <el-card>
      <el-form class="searchForm" :inline="true" :model="queryForm" label-width="90px">
        <el-form-item label="标题">
          <el-select v-model="queryForm.name" placeholder="请选择标题" style="width: 100%">
            <el-option label="关于25年度XXXXXX" value="关于25年度XXXXXX"></el-option>
            <el-option label="关于24年度XXXXXX" value="关于24年度XXXXXX"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pageChange(1)">查询</el-button>
          <!-- <el-button type="primary" @click="onAdd">添加</el-button> -->
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        height="500"
      >
        <el-table-column prop="title" label="标题" min-width="250">
          <template slot-scope="scope">
            <el-link type="success" @click="onlink(scope.row)">{{ scope.row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="dept" label="最后填报时间" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="perl" label="状态" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="date1" label="下发时间" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="date2" label="创建部门" min-width="150" align="center"> </el-table-column>
        <el-table-column prop="content" label="截至日期" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="Progress" label="汇报频次" min-width="120" align="center"> </el-table-column>
        <el-table-column prop="mark" label="内容" min-width="250"> </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px"
        :current-page="queryForm.pagenum"
        :page-sizes="[20, 50, 100]"
        :page-size="queryForm.pagesize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </el-card>
  </div>
</template>

<script>
// import { QueryPageList, Save, Del } from '@/api/settings/bibie'
export default {
  name: 'TaskDetails',
  data() {
    return {
      queryForm: {
        pagenum: 1,
        pagesize: 20,
        name: ''
      },
      total: 0,
      tableData: [
        {
          id: 3,
          title: '关于25年度XXXXXX',
          dept: '2025-06-09',
          perl: '填报中',
          date1: '2025-04-30',
          date2: '综合管理部',
          content: '2025-12-31',
          Progress: '月',
          mark: '2025-07-20 进度：60%XXXXXXXXXXXXXXXXXXXXX'
        },
        {
          id: 4,
          title: '关于24年度XXXXXX',
          dept: '2024-11-11',
          perl: '已完结',
          date1: '2024-04-02',
          date2: '综合管理部',
          content: '2025-03-01',
          Progress: '月',
          mark: '2025-02-11 进度：60%XXXXXXXXXXXXXXXXXXXXX'
        }
      ],
      loading: true,
      formRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        curr: [{ required: true, message: '请输入币别', trigger: 'blur' }],
        rate: [{ type: 'number', message: '折人民币汇率必须为数字值' }],
        rate1: [{ type: 'number', message: '折美汇率必须为数字值' }]
      },
      form: {}
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      console.log(page)
      this.queryForm.pagenum = page
      this.onSearch()
    },
    // 查询数据
    async onSearch() {
      this.loading = true
      // const { content } = await QueryPageList(this.queryForm)
      // console.log(content)
      // this.tableData = content.list
      // this.total = content.total
      this.loading = false
    },
    onClickName(data) {
      this.visible = true
      this.form = data
    },

    onAdd() {
      console.log(new Date())
      var time = new Date()
      this.form.time = time
      this.visible = true
    },
    onClose() {
      this.form = {}
    },
    onDel(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // const del = await Del({ id: data.id })
          // console.log(del)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearch()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // await Save(this.form)
          if (this.form.id) {
            this.$message({
              type: 'success',
              message: '修改数据成功'
            })
          } else {
            this.$message({
              type: 'success',
              message: '添加数据成功'
            })
          }
          this.visible = false
          this.onSearch()
        } else {
          return false
        }
      })
    },
    onlink(row) {
      if (row.perl == '填报中') {
        this.$router.push('/FillPage/FillPage')
      } else {
        this.$router.push('/FillPageV/FillPageV')
      }
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}
.title {
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
</style>
